import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';
import { conditionObjWithType } from '../../../../utils/Conditions'


export default class CarPurchaseInfoBox extends Component {

    constructor(props) {
        super(props);
        this.state = {
            show: true,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.titleText}>收购信息</Text>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                        this.setState( {
                            show: !this.state.show
                        })
                    }}>
                        <Image style={styles.rimg} source={require('source/image/car/xia.png')} ></Image>
                    </TouchableOpacity>
                </View>
                {this.state.show &&  (
                    <View>
                        <View style={styles.carInfoBottomBox}>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text style={styles.bottomTitleText}>{this.props.data.purchaseType ? conditionObjWithType('purchaseType')[this.props.data.purchaseType] : '-'}</Text>
                                <Text style={styles.bottomDesText}>收购性质</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text style={styles.bottomTitleText}>{this.props.data.purchasePrice ? (this.props.data.purchasePrice / (10000)).toFixed(2) + '万元' : '-'}</Text>
                                <Text style={styles.bottomDesText}>收购价</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text style={styles.bottomTitleText}>{this.props.data.purchaserName ? this.props.data.purchaserName : '-'}</Text>
                                <Text style={styles.bottomDesText}>收购员</Text>
                            </View>
                            <View style={styles.carInfoBottomItemBox}>
                                <Text style={styles.bottomTitleText}>{this.props.data.purchaseDate ? this.props.data.purchaseDate : '-'}</Text>
                                <Text style={styles.bottomDesText}>收购日期</Text>
                            </View>
                        </View>

                        {
                            this.props.data.purchaseRemark ?
                                <View style={styles.remarkBg}>
                                    <Text style={styles.rearmkText}>{this.props.data.purchaseRemark}</Text>
                                </View>
                                :
                                null
                        }
                    </View>
                )}

            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        marginHorizontal: 8,
        borderRadius: 6,
        flexDirection: 'column',
        backgroundColor: '#fff',
        padding: 16,
    },
    topBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    titleText: {
        color: '#333',
        fontWeight: 'bold',
        fontSize: 16
    },
    rimg:{
        width: 24,
        height: 24,
        marginRight: 10
    },
    carInfoBottomBox: {
        marginTop: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 65,
        paddingHorizontal: 12,
        backgroundColor: '#F4F4F4',
        borderRadius: 6
    },
    carInfoBottomItemBox: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    bottomTitleText: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333333',
    },
    bottomDesText: {
        marginTop: 8,
        fontSize: 12,
        color: '#666666',
    },
    remarkBg: {
        marginTop: 14,
        padding: 12,
        backgroundColor: '#F4F4F4',
        borderRadius: 4
    },
    rearmkText: {
        color: '#666666',
        fontSize: 14
    }
})